<template>
  <div class="filter-life-cycle consumption-container">
    <div class="flex-center table-top search-content">
      <px-form ref="formRef" :model="queryParams" :inline="true" class="custom-form-ui search-form">
        <px-form-item label="科室">
          <px-select
            v-model="queryParams.className"
            disabled
            filterable
            placeholder="请选择科室"
            @change="
              getSystemOptions();
              getEquipOptions();
              getMaterialOptions();
            "
          >
            <px-option v-for="item in depOptions" :key="item.itemValue" :label="item.name" :value="item.itemValue" />
          </px-select>
        </px-form-item>
        <px-form-item label="系统">
          <px-select
            v-model="queryParams.systemName"
            placeholder="请选择系统"
            clearable
            filterable
            @change="
              getEquipOptions();
              getMaterialOptions();
            "
          >
            <px-option v-for="item in systemOptions" :key="item.code" :label="item.name" :value="item.code" />
          </px-select>
        </px-form-item>
        <px-form-item label="设备">
          <px-select v-model="queryParams.eqpId" placeholder="请选择设备" clearable filterable>
            <!-- <px-option v-for="item in equipOptions" :key="item.eqpId" :label="item.eqpName" :value="item.eqpId" /> -->
            <px-option v-for="item in equipOptions" :key="item" :label="item" :value="item" />
          </px-select>
          <!-- <px-select-v2 v-model="queryParams.eqpId" :options="equipOptions" clearable filterable placeholder="请选择设备" /> -->
        </px-form-item>
        <px-form-item label="耗材名称">
          <px-select v-model="queryParams.filterSpc" placeholder="请选择耗材名称" clearable filterable>
            <px-option v-for="item in materialOptions" :key="item" :label="item" :value="item" />
          </px-select>
        </px-form-item>
        <div class="search-form-btn flexNowrap">
          <px-button type="primary" @click="handleQuery">查询</px-button>
          <px-button @click="resetQuery">重置</px-button>
        </div>
      </px-form>
    </div>
    <div ref="objectModelTableRef" class="table-content">
      <px-table
        v-loading="loading"
        :data="tableData"
        size="small"
        border
        class="common-table"
        :header-cell-style="headerCellStyleFn"
        :cell-style="cellStyleFn"
        :height="scrollbarHeight"
      >
        <px-table-column type="index" label="序号" width="55" align="center" />
        <px-table-column prop="ffuCode" label="所属设备" min-width="100" show-overflow-tooltip />
        <px-table-column prop="filterType" label="耗材名称" min-width="100" show-overflow-tooltip />
        <px-table-column prop="filterSpc" label="备件编码" min-width="60" show-overflow-tooltip />
        <!-- <px-table-column prop="filterInstallDate" label="系统"  min-width="120" show-overflow-tooltip /> -->
        <px-table-column prop="filterCode" label="规格型号" min-width="60" show-overflow-tooltip />
        <px-table-column prop="filterMaker" label="品牌" min-width="60" show-overflow-tooltip />
        <!-- <px-table-column prop="filterInstallDate" label="单位"  min-width="120" show-overflow-tooltip /> -->
        <px-table-column prop="filterNumber" label="数量" min-width="60" show-overflow-tooltip />
        <!-- <px-table-column prop="lifecycle_predict" label="出库单号"  min-width="60" show-overflow-tooltip /> -->
        <px-table-column prop="filterInstallDate" label="开始使用时间" min-width="80" show-overflow-tooltip />
        <px-table-column prop="filterNextInstallDate" label="结束使用时间" min-width="80" show-overflow-tooltip />
        <px-table-column prop="lifecycle_predict" label="实际使用时长" min-width="60" show-overflow-tooltip />
        <px-table-column prop="lifecycle_exp" label="额定使用时长" min-width="60" show-overflow-tooltip />
        <px-table-column prop="lifecycle_predict" label="预测使用时长" min-width="60" show-overflow-tooltip />
        <template #empty>
          <px-empty class="px-empty-common" />
        </template>
      </px-table>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "GAS_OPERATION_FILTER_LIFE_CYCLE_RECORD"
});
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { useRoute } from "vue-router";
import {
  queryListByTypeCode,
  querySystemModelCondition,
  queryEqpList,
  queryFilterList,
  queryListPage,
  listInstalledFiltersGAS,
  consumablelistInstalledDevices
} from "@/api/modules/operation";
import { useRouterStoreHook } from "@/store/modules/router";
import { useUpdateDomHeight, useCancelUpdateDomHeight } from "@/hooks/useCommon";

const route = useRoute();
const routerStore = useRouterStoreHook();
const factoryOptions = ref([]);

const gap = 40;
const defaultHeight = 606;
const scrollbarHeight = ref<number>(defaultHeight);
const objectModelTableRef = ref<HTMLElement | null>(null);

//获取厂区
const getFactoryOption = async () => {
  const params = { typeCode: "factoryArea" };
  factoryOptions.value = await queryListByTypeCode(params);
};
const depOptions = ref([]);
//获取科室
const getDepOption = async () => {
  const params = { typeCode: "className" };
  depOptions.value = await queryListByTypeCode(params);
};
const queryParams = reactive({
  // factory: "",
  className: routerStore.subject,
  systemName: "",
  eqpId: "",
  filterSpc: ""
  // pageNum: 1,
  // pageSize: 10
});
// 递归解构
const fn = (arr, options = []) => {
  for (let i = 0; i < arr.length; i += 1) {
    if (Array.isArray(arr[i].children)) {
      if (arr[i].children.length > 0) {
        fn(arr[i].children, options);
      }
    } else {
      options.push(arr[i]);
    }
  }
  return options;
};
//查系统
const systemOptions = ref([]);
const getSystemOptions = async () => {
  // const params = { factoryArea: queryParams.factory, className: queryParams.className };
  const params = { className: queryParams.className };
  const res = await querySystemModelCondition(params);
  systemOptions.value = fn(res);
};
//查设备
const equipOptions = ref([]);
const getEquipOptions = async () => {
  let systemCode = "";
  if (queryParams.systemName) {
    // systemCode.push(queryParams.systemName);
    systemCode = queryParams.systemName;
  }
  // const params = { facCode: queryParams.factory, className: queryParams.className, systemCode };
  const params = { className: queryParams.className, systemCode };
  const res = await consumablelistInstalledDevices(params);
  equipOptions.value = res;
  // equipOptions.value = res?.map(item => ({ label: item.eqpName, value: item.eqpId }));
};
const materialOptions = ref([]);
//查耗材
const getMaterialOptions = async () => {
  let systemCodes = [];
  if (queryParams.systemName) {
    systemCodes.push(queryParams.systemName);
  }
  // const params = { facCode: queryParams.factory, className: queryParams.className, systemCodes, pageNum: 1, pageSize: 999 };
  // const params = { className: queryParams.className, systemCodes, pageNum: 1, pageSize: 999 };
  // const res = await queryListPage(params);
  const res = await listInstalledFiltersGAS();
  materialOptions.value = res;
};

const tableData = ref([]);
// const total = ref(-1);
const loading = ref(false);
const devTypeObj = { GAS: ["Unit"], WATER: ["TOC-UV", "RO"], MACHINE: ["MAU", "NMAU", "AHU", "PCW"] };
const handleQuery = async () => {
  loading.value = true;
  //后台没有状态数据，传参去掉
  const devId = [];
  if (queryParams.eqpId) {
    devId.push(queryParams.eqpId);
  }
  const devType = devTypeObj[routerStore.subject];
  let tableDataList = [];
  for (let item of devType) {
    const params = { devId, filterSpec: queryParams.filterSpc, devType: item, className: queryParams.className, systemCode: queryParams.systemName };
    const res = await queryFilterList(params);
    if (res.success === true) {
      let filterList = res.ffuList
        .map(v => {
          return v.filters;
        })
        .flat();
      tableDataList = [...tableDataList, ...filterList];
    }
  }
  tableData.value = tableDataList;
  loading.value = false;
};
const formRef = ref(null);
const resetQuery = async () => {
  formRef.value.resetFields();
  // queryParams.factory = "";
  queryParams.className = routerStore.subject;
  queryParams.systemName = "";
  queryParams.eqpId = "";
  queryParams.filterSpc = "";
  await getEquipOptions();
  await handleQuery();
};
onMounted(async () => {
  if (route.query) {
    queryParams.eqpId = route.query.ffuCode;
    queryParams.filterSpc = route.query.filterSpc;
    // if (route.query.className) {
    //   queryParams.className = route.query.className;
    // }
  }
  getFactoryOption();
  getDepOption();
  getSystemOptions();
  getEquipOptions();
  getMaterialOptions();
  handleQuery();
  await useUpdateDomHeight(scrollbarHeight, objectModelTableRef, gap, defaultHeight);
});

onUnmounted(() => useCancelUpdateDomHeight());

const headerCellStyleFn = () => {
  const style = {};
  style["background-color"] = "var(--px-color-primary-light-9) !important";
  return style;
};

const cellStyleFn = () => {
  return { fontSize: "14px" };
};
</script>

<style lang="scss" scoped>
@import url("@/views/gas/consumption/scss/common.scss");

.filter-life-cycle {
  width: 100%;
  background-color: #fff;

  &-search {
    width: 100%;
  }

  .setContent-content-table {
    margin-top: 16px;
  }

  .search-content {
    margin-bottom: 16px;
  }

  :deep(.px-form-item) {
    margin-bottom: 0;

    &:not(.search-btn-form-item) {
      background-color: #f2f2f2;
      border: 1px solid #dfdfdf;
      border-radius: 4px;
    }

    .px-form-item__label {
      padding: 0 14px;
      font-weight: 500;
      color: #555;
    }

    .px-form-item__content {
      .px-input,
      .px-select,
      .px-date-picker,
      .px-time-picker,
      .px-tree-select {
        width: 100%;
        height: 100%;

        .select-trigger {
          height: 100%;
        }
      }

      .px-input__wrapper {
        border: none;

        &.is-focus {
          border: none;
          box-shadow: none;
        }
      }

      .px-input__icon.px-range__icon,
      .px-input__prefix {
        display: none;
      }

      .px-date-editor .px-range-input {
        width: 46%;
      }
    }
  }

  .search-form-btn {
    margin-bottom: 0;
  }

  .flexNowrap {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }
}
</style>
